<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
 
<logic:empty name="usuario">
	<logic:forward name="login" />
</logic:empty>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<link rel="stylesheet" type="text/css" href="/js/datepick/flora.datepick.css">

		<script type="text/javascript" src="/js/datepick/jquery.datepick.js"></script>
		<script type="text/javascript" src="/js/datepick/jquery.datepick-es.js"></script>		    	
		        
		<script>
			$(function(){
				$(".checkboxLista li").click(function (){
			  		if($(this).hasClass('uncheck')){
			    		$(this).removeClass('uncheck');
			    		$(this).addClass('check');
			  		}else{
			    		$(this).removeClass('check');
			    		$(this).addClass('uncheck');
			  		}
				});


				$('#periodo').css("text-align","center");
				$('#periodo').datepick($.extend({
					useThemeRoller: false, 
					rangeSelect: true, 
					numberOfMonths: 2}, $.datepick.regional['es']));		
			});

			function seleccionarTodos() {
				$('.checkboxLista li').removeClass('uncheck').addClass('check');
			}

			function seleccionarNinguno() {
				$('.checkboxLista li').removeClass('check').addClass('uncheck');
			}

			function seleccionarActivaReactiva() {
				if(document.getElementById("diario").checked && !document.getElementById("tm1").checked && !document.getElementById("tm2").checked) {
					document.getElementById("reactiva").disabled = "disabled";
					document.getElementById("reactiva").checked = "";
				} else
					document.getElementById("reactiva").disabled = "";
				if(!document.getElementById("diario").checked && !document.getElementById("tm1").checked && !document.getElementById("tm2").checked)
					document.getElementById("tm1").checked = "checked";
			}			

			function enviarSolicitud() {
				var tmp = $('.checkboxLista li').get();
				var tarificadores = "";
				for(var x = 0; x < tmp.length; x++) {
					if(tmp[x].className == "check") {
						if(tarificadores.length == 0)
							tarificadores += tmp[x].value;
						else
							tarificadores += "," + tmp[x].value;
					}
				}

				if(tarificadores.length == 0) {
					alert("NO ha seleccionado ningún PARQUE.");
				} else {		
					if(document.getElementById("mes_actual").checked)
						var periodo = document.getElementById("mes_actual").value;					
					if(document.getElementById("mes_pasado").checked )
						var periodo = document.getElementById("mes_pasado").value;
					if(document.getElementById("año_actual").checked)
						var periodo = document.getElementById("año_actual").value;
					if(document.getElementById("elegir_fecha").checked)
						var periodo = document.getElementById("periodo").value;

					var origen = document.getElementById("origen").value;
					var tm1 = (document.getElementById("tm1").checked ? "on" : "");
					var tm2 = (document.getElementById("tm2").checked ? "on" : "");
					var reactiva = (document.getElementById("reactiva").checked ? "on" : "");
					var diario = (document.getElementById("diario").checked ? "on" : "");

					var url = "&tarificadores=" + tarificadores + "&periodo=" + periodo + "&origen=" + origen;
					url += "&tm1=" + tm1 + "&tm2=" + tm2 + "&reactiva=" + reactiva + "&diario=" + diario;					

					document.location.href = "/ExplotacionAction.do?metodo=Exportar" + url;				
				}					
			}		
		</script>		
		
	</head>
	<body>
		<div class="blocks">
  			<div class="block" style="width: 500px; float: left;">
  				<h3 class="title"><span>Seleccione Instalaciones Exportar Medidas</span></h3>
  				<div class="block-div"></div><div class="block-div-arrow"></div>   
				<ul class="checkboxLista" style="height: 360px; overflow: auto;">						
					<logic:iterate id="parque" name="parques_autorizados">
						<logic:equal value="S" name="parque" property="propio">
							<logic:iterate id="tarificador" name="parque" property="tarificadores">
								<logic:notEqual value="2" name="tarificador" property="orden">
									<li class="uncheck" value="<bean:write name='tarificador' property='id_tarificador' format='#' />">
										<bean:write name="parque" property="nombre" />
											<logic:notEqual value="1" name="tarificador" property="orden">
												(<bean:write name="tarificador" property="nombre" />)
											</logic:notEqual>
									</li>
								</logic:notEqual>
							</logic:iterate>		
						</logic:equal>
					</logic:iterate>				              			                      	                     		                     
            	</ul>                  	  	
            	<p style="width: 450px; float: left; text-align: center;">
            		<a href="javascript: seleccionarTodos();">Marcar Todas las Instalaciones</a>
            		 | <a href="javascript: seleccionarNinguno();">Desmarcar Todas las Instalaciones</a>
            	</p>
          	</div> 
           	<div class="block" style="width: 450px; float: right;">
  				<h3 class="title"><span>Seleccione Opciones de la Exportación</span></h3>
  				<div class="block-div"></div><div class="block-div-arrow"></div>
  				<div id="opciones" style="text-align: left;">
  					<label>Origen de los Datos : </label>
  						<div style="padding-left: 20px;">  						  						
  							<input type="radio" id="origen" name="origen" checked="checked" value="1" /><span class="options" style="vertical-align: top;">&nbsp;Contador Principal</span><br>
							<input type="radio" id="origen" name="origen" value="2" disabled="disabled"/><span class="options" style="vertical-align: top;">&nbsp;Contador Secundario</span><br>
						</div>
  					<br>
 					<label>Tipo Resumen : </label>
 						<div style="padding-left: 20px;">						
						<input type="checkbox" id="tm1" name="tm1" checked="checked" onchange="seleccionarActivaReactiva();"/><span class="options" style="vertical-align: top;">&nbsp;Curva Horaria</span><br>
						<input type="checkbox" id="tm2" name="tm2" onchange="seleccionarActivaReactiva();"/><span class="options" style="vertical-align: top;">&nbsp;Curva CuartoHoraria</span><br>
						<input type="checkbox" id="reactiva" name="reactiva" onchange="seleccionarActivaReactiva();"/><span class="options" style="vertical-align: top;">&nbsp;Cálculo Reactiva</span><br>
						<input type="checkbox" id="diario" name="diario" onchange="seleccionarActivaReactiva();"/><span class="options" style="vertical-align: top;">&nbsp;Total Diario</span><br>
					</div>
					<br>
  					<label>Período : </label>
  						<div style="padding-left: 20px;">
	  						<input type="radio" name="periodo" id="mes_actual" checked="checked" onclick="$('#periodo').css('visibility','hidden');" value="1" /><span class="options" style="vertical-align: top;">&nbsp;Mes Actual</span><br>
	  						<input type="radio" name="periodo" id="mes_pasado" onclick="$('#periodo').css('visibility','hidden');" value="2" /><span class="options" style="vertical-align: top;">&nbsp;Mes Pasado</span><br>
	  						<input type="radio" name="periodo" id="año_actual" onclick="$('#periodo').css('visibility','hidden');" value="3" /><span class="options" style="vertical-align: top;">&nbsp;Año Actual</span><br>
	  						<input type="radio" name="periodo" id="elegir_fecha" onclick="$('#periodo').css('visibility','visible');" /><span class="options" style="vertical-align: top;">&nbsp;Elegir Fecha</span><br>
	  						<input type="text" name="periodo" id="periodo" style="width: 180px; visibility: hidden;"/>	  						
  						</div>
  						<br>					
					<input type="button" value="Solicitar" onclick="enviarSolicitud();" />
  				</div>  
   			</div>
		</div>
	</body>
</html>